APPENDIX 


CSS Reference 


This appendix includes CSS property descriptions, sorted both alphabetically 
and by category. For more detailed information, visit the World Wide Web 


Consortium Web site at www.w3.org. 
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ALPHABETICAL CSS PROPERTY REFERENCE 


TABLE B-1 Notati Definiti 
Common CSS otation efinition 
properties <> Words between angle brackets specify a type of value; for example, 
<color> enters a color value such as red 
A single vertical bar between values means one or the other must occur; 
for example, scroll | fixed means choose scroll or fixed 
lI Two vertical bars separating values means one or the other or both values 
can occur; for example, <border-width> II <border-style> Il <color> 
means any or all of the three values can occur 
[] Square brackets group parts of the property value together; for example, 
none | [ underline I! overline II line-through II blink ] means the value 
either is none or one of the values within the square brackets 
oe P Val Defaul Applies Ti 
Complete list of CSS ropert aues gaui i 
properties Background <background-color> Il <background- No default for All elements 
(Shorthand image> I| <background-repeat> || shorthand 
property) <background-attachment> II properties 


<background-position> 


Background- scroll | fixed Scroll All elements 

attachment 

Background- color name or hexadecimal Transparent All elements 

color value | transparent 

Background- <url> | none None All elements 

image 

Background- [<percentage> | <length>]{1,2} 0% 0% Block-level and 

position | [top | center | bottom] I! [left | replaced 
center | right] elements 

Background- repeat | repeat-x | repeat-y | Repeat All elements 

repeat no-repeat 

Border <border-width> I| <border-style> II No default for All elements 

(Shorthand <color> shorthand 


property) properties 


TABLE B-2 
Complete list of CSS 
properties 
(continued) 


Property 


Border- 
bottom 


Border- 
bottom-width 


Border-color 


Border-left 
(Shorthand 
property) 


Border-left- 
width 


Border-right 
(Shorthand 
property) 


Border-right- 
width 


Border-style 


Border-top 
(Shorthand 
property) 


Border-top- 
width 


Border-width 
(Shorthand 
property) 


Clear 
Color 
Display 
Float 


Font 
(Shorthand 
property) 


Font-family 
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Values 
<border-bottom-width> || 
<border-style> || <color> 

thin | medium | thick | <length> 


<color> 


<border-left-width> || 
<border-style> II 
<color> 


thin | medium | thick | <length> 


<border-right-width> I| <border- 
style> II <color> 


thin | medium | thick | <length> 


none | dotted | dashed | solid | 
double | groove | ridge | inset | 
outset 


<border-top-width> I| <border- 
style> II <color> 


thin | medium | thick | <length> 


[thin | medium | thick | <length>] 


none | left | right | both 
<color> 

block | inline | list-item | none 
left | right | none 


[<font-style> II <font-variant> II 
<font-weight>] <font-size> 
[/ <line-height>] <font-family> 


Font family name (such as Times) 
or generic family name (such as 
sans-serif) 


Default 


No default for 
shorthand 
properties 


Medium 


Value of the 
‘color’ property 


No default for 
Shorthand 
properties 


Medium 


No default for 
Shorthand 
properties 


Medium 


None 


No default for 
Shorthand 
properties 


Medium 


No default for 
Shorthand 
properties 


None 
Browser specific 
Block 
None 


No default for 
Shorthand 
properties 


Browser specific 


Applies To 


A 


Al 


ee ee eae E 


elements 


elements 


elements 


elements 


elements 


elements 


elements 


elements 


elements 


elements 


elements 


elements 
| elements 
elements 


elements 


elements 


elements 
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eee P Val Defaul Applies T 
Complete list of CSS ponent eee graut ppIeSiio 
properties Font-size <absolute-size> | <relative-size> Medium All elements 
(continued) 
| <length> | <percentage> 
Font-style normal | italic | oblique Normal All elements 
Font-variant normal | small-caps Normal All elements 
Font-weight normal | bold | bolder | lighter | Normal All elements 
100 | 200 | 300 | 400 I 500 | 600 | 
700 | 800 | 900 
Height <length> | <percentage> | auto Auto Block-level and 
replaced 
elements 
Letter-spacing normal | <length> Normal All elements 
Line-height normal | <number> | <length> | Normal All elements 
<percentage> 
List-style <keyword> I| <position> II <url> No default for Elements with 
(Shorthand Shorthand ‘display’ value 
property) properties ‘list-item’ 
List-style- <url> | none None Elements with 
image ‘display’ value 
‘list-item’ 
List-style- inside | outside Outside Elements with 
position ‘display’ value 
‘list-item’ 
List-style-type disc | circle | square | decimal | Disc Elements with 
lower-roman | upper-roman | ‘display’ value 
lower-alpha | upper-alpha | none ‘list-item’ 
Margin [<length> | <percentage> | auto] No default for All elements 
(Shorthand Shorthand 
property) properties 
Margin- <length> | <percentage> | auto 0 All elements 
bottom 
Margin-left <length> | <percentage> | auto 0 All elements 
Margin-right <length> | <percentage> | auto 0 All elements 
Margin-top <length> | <percentage> | auto 0 All elements 
Padding <length> | <percentage> 0 All elements 
Padding- <length> | <percentage> 0 All elements 
bottom 
Padding-left <length> | <percentage> 0 All elements 


TABLE B-2 
Complete list of CSS 
properties 
(continued) 


Property 
Padding-right 
Padding-top 


Text-align 
Text- 
decoration 
Text-indent 
Text- 
transform 
Vertical-align 


White-space 


Width 


Word-spacing 
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Values 


<length> | <percentage> 
<length> | <percentage> 


left | right | center | justify 


none | [ underline I! overline || 
line-through II blink ] 


<length> | <percentage> 


capitalize | uppercase | lowercase 
| none 


baseline | sub | super | top | text- 
top | middle | bottom | text-bottom 
| <percentage> 


normal | pre | nowrap 


<length> | <percentage> | auto 


normal | <length> 


Default 


0 
0 


Browser specific 


None 


None 


Baseline 


Normal 


Auto 


Normal 


Applies To 


All elements 
All elements 


Block-level 
elements 


All elements 


Block-level 
elements 


All elements 


Inline 
elements 


Block-level 
elements 


Block-level and 
replaced 
elements 


All elements 


CSS PROPERTIES BY CATEGORY 


TABLE B-3 


CSS font and text 
properties 


FONT AND TEXT PROPERTIES 
Property Values 
Color <color> 
Font [<font-style> || <font-variant> Il 
(Shorthand <font-weight> | <font-size> 
property) [ / <line-height>] <font-family> 
Font-family Font family name (such as Times) 
or generic family name (such 
as sans-serif) 
Font-size <absolute-size> | <relative-size> | 
<length> | <percentage> 
Font-style normal | italic | oblique 


Font-variant 


normal | small-caps 


Default 


Browser specific 


No default for 
Shorthand 
properties 


Browser specific 


Medium 


Normal 


Normal 


Applies To 
All elements 


All elements 


> 


| elements 


D> 


| elements 


D 


| elements 


> 


| elements 
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TABLE B-3 


CSS font and text 
properties 
(continued) 


TABLE B-4 
CSS box properties 


Property 


Font-weight 


Letter-spacing 


Line-height 


Text- 
decoration 


Text-indent 
Text- 


transform 


Vertical-align 


Word-spacing 


Values 


normal | bold | bolder | lighter | 
100 | 200 | 300 | 400 | 500 | 600 | 
700 | 800 | 900 


normal | <length> 


normal | <number> | <length> | 
<percentage> 


none | [ underline Il overline II 
line-through I! blink ] 


<length> | <percentage> 


capitalize | uppercase | 
lowercase | none 


baseline | sub | super | top | text- 
top | middle | bottom | text-bottom 
| <percentage> 


normal | <length> 


BOX PROPERTIES 
Property Values 
Margin [<length> | <percentage> | auto] 
(Shorthand 
property) 
Margin- <length> | <percentage> | auto 
bottom 
Margin-left <length> | <percentage> | auto 
Margin-right <length> | <percentage> | auto 
Margin-top <length> | <percentage> | auto 
Padding <length> | <percentage> 
Padding- <length> | <percentage> 
bottom 
Padding-left <length> | <percentage> 


Padding-right 
Padding-top 


Border 
(Shorthand 
property) 


<length> | <percentage> 


<length> | <percentage> 


<border-width> || <border-style> II 
<color> 


Default 


Normal 


Normal 


Normal 


None 


None 


Baseline 


Normal 


Default 


No default for 
Shorthand 
properties 


0 


Sa |S] 2] oT] & 


0 


No default for 
Shorthand 
properties 


Applies To 


All elements 


> 


| elements 


> 


| elements 


> 


| elements 


Ww 


ock-level 
ements 


ia) 


> 


| elements 


Inline 
elements 


All elements 


Applies To 


All elements 


> 


| elements 


| elements 


| elements 


A 
A 
All elements 
All elements 
A 


| elements 


| elements 


| elements 


| elements 


E È SF DB 


| elements 


TABLE B-4 


CSS box properties 
(continued) 


Property 


Border-bottom 


Border- 
bottom-width 


Border-color 


Border-left 
(Shorthand 
property) 


Border-left- 
width 


Border-right 
(Shorthand 
property) 


Border-right- 
width 


Border-style 


Border-top 
(Shorthand 
property) 


Border-top- 
width 


Border-width 
(Shorthand 
property) 


Clear 
Float 
Height 


Width 
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Values 


<border-bottom-width> || 
<border-style> I| <color> 


thin | medium | thick | <length> 


<color> 


<border-left-width> || <border- 
style> II <color> 


thin | medium | thick | <length> 


<border-right-width> || <border- 
style> II <color> 


thin | medium | thick | <length> 


none | dotted | dashed | solid | 
double | groove | ridge | inset | 
outset 


<border-top-width> |! <border- 
style> II <color> 

thin | medium | thick | <length> 
[thin | medium | thick | <length>] 
none | left | right | both 


left | right | none 


<length> | <percentage> | auto 


<length> | <percentage> | auto 


Default 


No default for 
Shorthand 
properties 


Medium 


Value of the 
‘color’ property 


No default for 
Shorthand 
properties 


Medium 


No default for 
Shorthand 
properties 


Medium 


None 


No default for 
Shorthand 
properties 


Medium 


No default for 
Shorthand 
properties 


None 
None 


Auto 


Auto 


Applies To 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 


All elements 
All elements 


Block-level 
and replaced 
elements 


Block-level 
and replaced 
elements 
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TABLE B-5 


CSS background 
properties 


TABLE B-6 


CSS classification 
properties 


BACKGROUND PROPERTIES 


Property 


Background 
(Shorthand 
property) 


Background- 
attachment 


Background- 


color 


Background- 


image 


Background- 
position 


Background- 


repeat 


Values 


<background-color> I| <background- 
image> || <background-repeat> || 
<background-attachment> || 
<background-position> 


scroll | fixed 


color name or hexadecimal value | 
transparent 


<url> | none 


[<percentage> | <length>]{1,2} | 
[top | center | bottom] |I [left | 
center | right] 


repeat | repeat-x | repeat-y | 
no-repeat 


CLASSIFICATION PROPERTIES 


Property 


Display 
List-sty 


e 


(Shorthand 


property) 


List-sty 
image 


List-sty 
position 


List-sty 
type 


e- 


e- 


White-space 


Values 
block | inline | list-item | none 


<keyword> I| <position> II <url> 


<url> | none 


inside | outside 


disc | circle | square | decimal | 
lower-roman | upper-roman | 
lower-alpha | upper-alpha | none 


normal | pre | nowrap 


Default 


No default for 
Shorthand 
properties 


Scroll 


Transparent 


None 


0% 0% 


Repeat 


Default 
Block 


No default for 
Shorthand 
properties 


None 


Outside 


Disc 


Normal 


App 
Alle 


Alle 


Alle 


Alle 


feb) 


Alle 


lies To 


lements 


lements 


lements 


lements 


Block-level 
nd replaced 
elements 


lements 


Applies To 


Alle 


Elem 
‘disp 
‘list-i 
Elem 
‘disp 
‘list-i 
Elem 
‘disp 
‘list-i 
Elem 
‘disp 
‘list-i 


ements 


ents with 
ay’ value 
tem’ 


ents with 
ay’ value 
tem’ 


ents with 
ay’ value 
tem’ 


ents with 
ay’ value 
tem’ 


Block-level 


elem 


ents 
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CSS MEASUREMENT UNITS 


TABLE B-7 


Bes measurement Unit Code Abbreviation Description 

properties Centimeter cm Standard metric centimeter 

Em em The width of the capital M in the current font, 
usually the same as the font size 

EX ex The height of the letter x in the current font 
Inch in Standard U.S. inch 
Millimeter mm Standard metric millimeter 
Relative For example: 150% Sets a font size relative to the base font size; 


150% equals one-and-one-half the base font size 


Pica pc Standard publishing unit, equal to 12 points 
Pixel px The size of a pixel on the current display 
Point pt Standard publishing unit; there are 72 points in 


an inch 


